import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Tooltip from '@kuiper-components/tooltip';
import Input from '@kuiper-components/input';

import WarningsStatusEdit from '../../../../../../components/WarningsStatusEdit';
import Empty from '../../../../../../components/empty/EmptyData';
import CopyBoard from '../../../../../../components/CopyBoard';
import { datetime, number } from '../../../../../../../common/formatter';
import Table from '@knownsec/react-component/dist/Table';
import Icon from './icon';
import { Link } from 'react-router-dom';
import EventDetail from './EventDetail';
import s from './style.module.css';
import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../../../common/constants';

function warningStatsBuilder(warning = {}) {
	let text;
	if (warning.ignoredTime) {
		text = (
			<Tooltip
				placement="top"
				overlay={
					<span className={s.time}>
						忽略操作: {datetime(warning.ignoredTime)}
					</span>
				}
			>
				<span className={s.ignored}>已忽略</span>
			</Tooltip>
		);
	} else if (warning.isResolved) {
		text = <span className={s.resolved}>已处理</span>;
	} else {
		text = <span className={s.notResolved}>待处理</span>;
	}
	return text;
}
function NewTable({
	className,
	category,
	tableData,
	isModified,
	cydEnabled,
	taskId,
	refetch,
	loading,
	tp,
	notStatus,
	empty,
	jid,
	id,
	atid,
	isHistory,
	taskType
}) {
	const titleObj = {
		keyword: '敏感词数',
		privacy_disclosure: '隐私信息数',
	};
	const [colum, setColum] = React.useState([]);
	const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
	const onSelectChange = newSelectedRowKeys => {
		setSelectedRowKeys(newSelectedRowKeys);
	};
	const rowSelection = {
		selectedRowKeys,
		onChange: onSelectChange,
	};
	const nodeRef = React.useRef();

	const columns = [
		{
			title: '风险地址',
			dataIndex: 'affects',
			key: 'affects',
			// eslint-disable-next-line react/display-name
			render: affects => {
				return <CopyBoard className={s.affect} text={affects} />;
			},
		},
		notStatus ? {} : {
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			render(cur, record) {
				return (
					<>
						{warningStatsBuilder(record)}
						{isModified && (
							<WarningsStatusEdit
								controlText="处理"
								refetch={refetch}
								taskId={taskId}
								key={record.id}
								getTooltipContainer={() => nodeRef?.current}
								idsObj={{ [record.id]: true }}
							/>
						)}
					</>
				);
			},
		},
		{
			title: '操作',
			key: 'oper',
			render(cur, record) {
				return (
					<>
						<Link
							to={{
								pathname: `/job-manage/web-task/content-detail/${record.tid}/DetailC`,
								sendState: {
									jid, atid,
									taskId: record.tid,
									taskType,
									id: record._id,
									title: record.title,
									cydEnabled,
									isHistory,
									url: record?.affects,
								},
							}}
						>
							查看详情
						</Link>
					</>
				);
			},
		},
	];
	React.useEffect(() => {
		const mingan = {
			title: '敏感词数',
			key: 'hack',
			render(cur, d) {
				return (
					<div>
						{number(
							Object.values(d.detail).reduce((s, words) => {
								words.map(x => s.add(x));
								return s;
							}, new Set()).size
						)}
					</div>
				);
			},
		};
		const secret = {
			title: '隐私信息数',
			key: 'bad',
			render(cur, d) {
				return (
					<div>
						{number(
							Object.values(d.detail).reduce((s, words) => {
								words.map(x => s.add(x));
								return s;
							}, new Set()).size
						)}
					</div>
				);
			},
		};
		if (titleObj.hasOwnProperty(category)) {
			const co = [...columns];
			const idx = columns.findIndex(item => item.status === 'status');
			co.splice(
				idx - 1,
				0,
				mingan.title.includes(titleObj[category]) ? mingan : secret
			);
			setColum(co);
		} else {
			setColum(columns);
		}
	}, [category]);

	const handleResetSelected = () => {
		setSelectedRowKeys([]);
	};
	const style = { display: 'flex', 'align-items': 'center' };

	return (
		<div className={cn(className, s.tableWapper)} ref={nodeRef}>
			<div className={s.title}>
				{WARNING_CATEGORY_KEY_LABEL_MAP.content[category]}
				<span className={s.num}>({tableData.length})</span>
				<Tooltip placement="top" overlay={<span>低危</span>}>
					<span style={style}>
						<Icon />
					</span>
				</Tooltip>
			</div>
			{isModified ? (
				<>
					<Table
						loading={loading}
						columns={colum}
						data={tableData}
						pro
						rowSelection={notStatus ? {} : rowSelection}
						empty={empty}
						scroll={tableData.length ? { y: '235px', x: true } : {}}
					/>
					<div>
						<WarningsStatusEdit
							controlText="处理"
							reset={handleResetSelected}
							refetch={refetch}
							taskId={taskId}
							idsObj={selectedRowKeys.reduce((cur, item) => {
								cur[item.id] = item;
								return cur;
							}, {})}
							isBatchSetting={true}
							getTooltipContainer={() => nodeRef?.current}
						/>
					</div>
				</>
			) : (
				<Table
					loading={loading}
					columns={colum}
					data={tableData}
					pro
					empty={empty}
					scroll={tableData.length ? { y: '235px', x: true } : {}}
				/>
			)}
		</div>
	);
}

NewTable.propTypes = {
	className: PropTypes.string,
	category: PropTypes.string.isRequired,
	tableData: PropTypes.array,
	isModified: PropTypes.bool,
	taskId: PropTypes.string,
	refetch: PropTypes.func,
	cydEnabled: PropTypes.bool,
};
NewTable.defaultProps = {
	className: '',
	isModified: true,
	tableData: [],
};

export default NewTable;
